<template>
  <div id="file-view-index-container">
<!--    <TopNav/>-->
    <MainBreadCrumb :dataList="breadCrumgDataList" @breadCrumbClickHandler="breadCrumbClickHandler"/>
<!--    <FileViewTable :listData="listData"/>-->
    <FileViewCard :listData="listData" @fileClickHandler="fileClickDirection" v-if="currViewFlag === 1"/>
    <VideoView :videoUrl="videoUrl" v-if="currViewFlag === 2"/>
  </div>
</template>

<script>
    import TopNav from "../../components/Nav/TopNav";
    import MainBreadCrumb from "../../components/BreadCrumb/MainBreadCrumb/index";
    import FileViewTable from "../../components/FileView/view/FileViewTable";
    import FileViewCard from "../../components/FileView/view/FileViewCard";
    import VideoView from "../../components/Video/VideoView";

    export default {
      name: "file-view-index",
      components: {VideoView, FileViewCard, MainBreadCrumb, TopNav, FileViewTable},
      data() {
        return {
          listData: [],
          absPath: '/',
          // 1 表示文件列表， 2 表示视频， 3 表示图片
          currViewFlag: 1,
          //视频url
          videoUrl: ''
        }
      },
      methods: {
        //获取子文件列表
        getChildFileList() {
          this.$api.fileView.getChildFileList({
            urlAbsPath: this.absPath
          }).then(res => {
            this.listData = res.data.data;
          });
        },
        //点击文件时处理
        fileClickDirection(item, index) {
          //改变面包屑
          // console.log(item.urlAbsPath);
          this.absPath = item.urlAbsPath;
          //文件夹
          if(item.fileTypeFlag === 1) {
            this.directionClickHandler(item, index);
          } else if(item.fileTypeFlag === 2) {
            //视频
            this.videoClickHandler(item, index);
          } else if(item.fileTypeFlag === 3) {
            //图片
            // this.fileClickHandler(item, index);
          } else {
            //其他
            // this.fileClickHandler(item, index);
          }

        },
        //处理文件夹
        directionClickHandler(item, index) {
          //刷新页面
          this.getChildFileList();
        },
        //处理其他文件
        fileClickHandler(item, index) {
          // this.$router.push(this.$api.urlCompletion.getStaticUrl(item.urlAbsPath));
        },
        videoClickHandler(item, index) {
          this.videoUrl = this.$api.urlCompletion.getStaticUrl(item.urlAbsPath);
          this.currViewFlag = 2;
        },
        //点击面包屑
        breadCrumbClickHandler(item, index) {
          // console.log('---')
          // console.log(item);
          // console.log(index);
          // console.log(this.breadCrumgDataList)
          if(index + 1 < this.breadCrumgDataList.length) {
            this.currViewFlag = 1;
            // let str = this.breadCrumgDataList.splice(index + 1, this.breadCrumgDataList.length - 1 - index).join('/');
            let arr = this.breadCrumgDataList.splice(0, index + 1);
            // console.log(arr)
            arr.shift()
            let str = arr.join('/')
            // arr.;
            // console.log(str)
            this.absPath = '/' + str;
            //刷新数据
            this.getChildFileList();
          }
          // console.log(this.absPath)
          // console.log(this.breadCrumgDataList)
        }
      },
      mounted() {
        this.getChildFileList();
        // console.log(availHeight);
        // console.log(this.$refs['fileViewComponent'].getBoundingClientRect())
      },
      computed: {
        breadCrumgDataList: function () {
          if(this.absPath == null || this.absPath.length === 0 || this.absPath.replace(/(^s*)|(s*$)/g, "").length === 0
              || '/' === this.absPath) {
            return ['Home'];
          }
          let arr = this.absPath.split('/');
          //删除arr中的空格和换行
          arr.unshift('Home');
          for (let i = arr.length; i >= 0; i--) {
            if(arr[i] == null || arr[i] === '') {
              arr.splice(i, 1);
            }
          }
          // console.log('------')
          // console.log(arr);
          return arr;
        }
      }
    }
</script>

<style scoped>
  #file-view-index-container {
    padding-left: 6px;
    padding-right: 6px;
  }
</style>
